import React, {useEffect, useState, useRef} from 'react'
import {PlusOutlined} from '@ant-design/icons'
import {regionData} from '../utils/region'
import {
    Button,
    Col,
    Flex,
    Form,
    Input,
    Row,
    Select,
    Typography,
    DatePicker,
    Table,
    Alert,
    Cascader,
    Switch,
    Modal,
    Radio,
    message
} from 'antd'
import {shopDel, shopDisable, shopEnable, shopList} from '../service/shop'
import ImageUpload from '../components/ImageUpload'
import MyDatePicker from '../components/MyDatePicker'
import ManyUpload from '../components/ManyUpload'
import {Link, useNavigate} from 'react-router-dom'

export default function ShopList() {
    const navigate = useNavigate()
    // 保存门店照片
    const [fileList, setFileList] = useState([])
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    // 保存店铺列表
    const [storeList, setStoreList] = useState([])
    // 保存页码
    const [pageNo, setPageNo] = useState(1)
    // 总数据量
    const [total, setTotal] = useState(0)
    // 预设日期
    // 保存表格中选中的项
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 表格中是否有选中
    const hasSelected = selectedRowKeys.length > 0
    // 获取省市区选中的值
    const regionChange = (value) => {
        console.log(value)
    }
    // 创建表单的引用
    const formRef = useRef()
    // 模态框
    const [isModalOpen, setIsModalOpen] = useState(false)

    // 保存图像上传
    const [imageLogo, setImageLogo] = useState()
    // 搜索条件
    const [condition, setCondition] = useState({})
    // 用于更新列表
    const [n, setN] = useState(1)
    const request = async () => {
        const res = await shopList({
            ...condition,
            pageNo,
            pageSize: 10
        })
        console.log(res)
        setStoreList(res.data.objects)
        setTotal(res.data.total)
    }
    useEffect(() => {
        request()
    }, [n, pageNo])

    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined/>}
                            onClick={() => navigate('/admin/shop/add')}
                            // onClick={() => setIsModalOpen(true)}
                        >
                            新建门店
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form
                        // layout="inline"
                        onFinish={async (values) => {
                            // if (selectedDate) {
                            //   values.startingTime = selectedDateString[0] + ' 0:0:0'
                            //   values.endTime = selectedDateString[1] + ' 23:59:59'
                            // }
                            setCondition(values)
                            console.log(values)
                            await request()
                            setN(n + 1)
                        }}
                    >
                        <Row>
                            <Col span={8} className="myinput">
                                <Form.Item label="门店名称：" name="storeName">
                                    <Input placeholder="请输入门店名称"/>
                                </Form.Item>
                            </Col>
                            <Col span={8} className="myinput">
                                <Form.Item label="负责人联系方式：" name="storeHeadPhone">
                                    <Input type="phone" placeholder="请输入联系方式"/>
                                </Form.Item>
                            </Col>
                            <Col span={8} className="myinput">
                                <Form.Item label="区域选择：" name="storeAddress">
                                    <Cascader
                                        options={regionData}
                                        onChange={regionChange}
                                        placeholder="请选择查询的省/市/区县"
                                        style={{width: 280}}
                                    />
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={5} className="myinput">
                                <Form.Item label="入驻日期">
                                    <MyDatePicker
                                        selectedDateString={selectedDateString}
                                        setSelectedDateString={setSelectedDateString}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={6} className="myinput">
                                <Form.Item label="门店状态" initialValue={'0'}>
                                    <Select
                                        placeholder="请选择门店状态"
                                        options={[
                                            {
                                                value: '',
                                                label: '全部'
                                            },
                                            {
                                                value: '0',
                                                label: '启用'
                                            },
                                            {
                                                value: '1',
                                                label: '停用'
                                            }
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={2} className="myinput">
                                <Form.Item>
                                    <Button type="default" htmlType="reset">
                                        重置
                                    </Button>
                                </Form.Item>
                            </Col>
                            <Col span={1} className="myinput">
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        查询
                                    </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        店铺列表
                    </Typography.Paragraph>
                    {hasSelected && (
                        <Alert
                            message={`已经选择 ${selectedRowKeys.length} 项`}
                            type="info"
                            showIcon
                        />
                    )}
                </Col>
                <Col span={24}>
                    <Table
                        pagination={{
                            total,
                            defaultCurrent: 1,
                            onChange: async (page) => {
                                setPageNo(page)
                            }
                        }}
                        rowKey="id"
                        rowSelection={{
                            selectedRowKeys,
                            onChange: (newSelectedRowKeys) => {
                                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                                setSelectedRowKeys(newSelectedRowKeys)
                            }
                        }}
                        dataSource={storeList}
                        columns={[
                            {
                                title: '编号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '门店名称',
                                dataIndex: 'storeName',
                                key: 'storeName'
                            },
                            {
                                title: '商家地址',
                                dataIndex: 'storeLocation',
                                key: 'storeLocation'
                            },
                            {
                                title: '门店电话',
                                dataIndex: 'storePhone',
                                key: 'storePhone'
                            },
                            {
                                title: '负责人',
                                dataIndex: 'storeHeadName',
                                key: 'storeHeadName'
                            },
                            {
                                title: '联系电话',
                                dataIndex: 'storeHeadPhone',
                                key: 'storeHeadPhone'
                            },
                            {
                                title: '创建时间',
                                dataIndex: 'createTime',
                                key: 'createTime'
                            },
                            {
                                title: '更新时间',
                                dataIndex: 'updateTime',
                                key: 'updateTime'
                            },
                            {
                                title: '启用状态',
                                dataIndex: 'storeStatus',
                                key: 'storeStatus',
                                render: (_, record) => {
                                    return (
                                        <Switch
                                            defaultChecked={record.storeStatus == 0}
                                            onChange={async (value) => {
                                                console.log(value)
                                                if (value) {
                                                    await shopEnable(record.id)
                                                    message.success('状态启用成功')
                                                } else {
                                                    await shopDisable(record.id)
                                                    message.success('状态停用')
                                                }
                                            }}
                                        />
                                    )
                                }
                            },
                            {
                                title: '操作',
                                dataIndex: 'op',
                                key: 'op',
                                align: 'center',
                                render: (_, record) => {
                                    return (
                                        <span className="op">
                      <Link to={`/admin/shop/edit/${record.id}`}>编辑</Link>
                      <a
                          onClick={async () => {
                              const res = await shopDel(record.id)
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('删除成功')
                                  setN(n + 1)
                              }
                          }}
                      >
                        删除
                      </a>
                    </span>
                                    )
                                }
                            }
                        ]}
                    />
                </Col>
            </Row>
            <Modal
                title="新建门店"
                open={isModalOpen}
                onOk={() => formRef.current.submit()}
                onCancel={() => setIsModalOpen(false)}
                maskClosable={false}
                width={750}
                destroyOnClose
            >
                <Form
                    onFinish={async (v) => {
                        console.log(v)
                    }}
                    layout="vertical"
                    ref={formRef}
                    // 当字段被删除时不保留字段值
                    preserve={false}
                >
                    <Row>
                        <Col span={12}>
                            <Form.Item
                                label="所属商家"
                                name="businessId"
                                rules={[
                                    {
                                        required: true,
                                        message: '所属商家不能为空'
                                    }
                                ]}
                            >
                                <Select
                                    placeholder="请选商家"
                                    options={[
                                        {
                                            value: '1',
                                            label: '餐饮'
                                        },
                                        {
                                            value: '2',
                                            label: '体育'
                                        },
                                        {
                                            value: '3',
                                            label: '娱乐'
                                        }
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={11} offset={1}>
                            <Form.Item
                                label="门店名称"
                                name="businessName"
                                rules={[
                                    {
                                        required: true,
                                        message: '门店名称不能为空'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入门店名称"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="门店电话"
                                name="storePhone"
                                rules={[
                                    {
                                        required: true,
                                        message: '所属商家不能为空'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入门店名称"/>
                            </Form.Item>
                        </Col>
                        <Col span={11} offset={1}>
                            <Form.Item
                                label="负责人"
                                name="storeHeadName"
                                rules={[
                                    {
                                        required: true,
                                        message: '负责人不能为空'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入负责人"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="负责人电话"
                                name="storeHeadPhone"
                                rules={[
                                    {
                                        required: true,
                                        message: '负责人电话不能为空'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入负责人电话"/>
                            </Form.Item>
                        </Col>

                        <Col span={11} offset={1}>
                            <Form.Item
                                label="门店地区"
                                name="storeAddress"
                                rules={[
                                    {
                                        required: true,
                                        message: '门店地区不能为空'
                                    }
                                ]}
                            >
                                <Cascader
                                    options={regionData}
                                    onChange={regionChange}
                                    placeholder="请选择查询的省/市/区县"
                                    style={{width: '100%'}}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item
                                label="详细地址"
                                name="storeLocation"
                                rules={[
                                    {
                                        required: true,
                                        message: '地址不能为空'
                                    }
                                ]}
                            >
                                <Input placeholder="请输入地址" value="中鼎大厦"/>
                            </Form.Item>
                        </Col>
                        <Col span={11} offset={1}>
                            <Form.Item label="坐标" name="storeLongitude">
                                <Input value="坐标"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="门店照片" name="storeImagesId">
                                <ManyUpload fileList={fileList} setFileList={setFileList}/>
                            </Form.Item>
                        </Col>
                        <Col span={11} offset={1}>
                            <Form.Item label="门店LOGO" name="storeLongitude">
                                <ImageUpload imageUrl={imageLogo} setImageUrl={setImageLogo}/>
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item label="商家简介" name="storeIntroduction">
                                <Input.TextArea placeholder="请输入商家简介"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="排序" name="sort">
                                <Select
                                    placeholder="请选择门店状态"
                                    defaultValue={'1'}
                                    options={[
                                        {
                                            value: '1',
                                            label: '升序'
                                        },
                                        {
                                            value: '2',
                                            label: '降序'
                                        }
                                    ]}
                                />
                            </Form.Item>
                        </Col>
                        <Col span={11} offset={1}>
                            <Form.Item label="门店状态" name="storeStatus">
                                <Radio.Group name="radioGroup" defaultValue={1}>
                                    <Radio value={1}>开启</Radio>
                                    <Radio value={0}>禁用</Radio>
                                </Radio.Group>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </>
    )
}
